<template>

    <div class="page-content">
        
      <ejs-splitter id='splitter1' class='splitterContent' ref="splitterObj" :separatorSize=4 width='100%' height='100%'>
          <e-panes>
              <e-pane size="20%" min="300px" :content='ApiList'></e-pane>
              <e-pane size="50%" min="200px" :content='MiddleContent'></e-pane>
              <e-pane size="30%" min="350px" :content='ApiResult'></e-pane>
            
          </e-panes>
      </ejs-splitter>
       
    </div>


</template>

<script>
import Vue from "vue";
import ApiList from './ApiList.vue'
import MiddleContent from './MiddleContent.vue'
import ApiResult from './ApiResult.vue'


export default {
  components: {
    ApiList,
    MiddleContent,
    ApiResult
  },
  data() {
        return {
          ApiList: function () {
            return { template : ApiList }
          },
          MiddleContent: function () {
            return { template : MiddleContent }
          },
          ApiResult: function () {
            return { template : ApiResult }
          },

        }
    },
  methods: {

  }
}
</script>
<style>
 .page-content {
  height: 87vh;
 }
</style>